﻿@page "/tree-grid/filter-bar-template"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the template support of filterbar in Tree Grid.</p>
</SampleDescription>
<ActionDescription>
   <p><p>The Tree Grid provides a way to use custom control for filterbar using the filter template feature. </p>
   <p>In this demo, we have rendered dropdownlist for Duration Column using the FilterTemplate, from which a value can be selected to filter the column.</p>
   <p>More information on the filter bar template can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/filtering/#filter-bar'>documentation section</a>.</p></p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
             <SfTreeGrid @ref="TreeGrid" DataSource="TreeGridData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" Height="315" AllowFiltering="true">
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100">
                        <FilterTemplate>
                            <SfDropDownList TValue="string" TItem="DDLData" DataSource="@DropdownData">
                                <DropDownListEvents ValueChange="Change" TValue="string" TItem="DDLData"></DropDownListEvents>
                                <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
                            </SfDropDownList>
                        </FilterTemplate>
                    </TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="85" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="89" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>



@code{
    SfTreeGrid<SelfReferenceData> TreeGrid;

    public List<SelfReferenceData> TreeGridData { get; set; }

    public List<DDLData> DropdownData { get; set; } = new List<DDLData> {
        new DDLData { Text = "In Progress", Value = "In Progress" },
        new DDLData { Text = "Open", Value = "Open" },
        new DDLData { Text = "Validated", Value = "Validated" },
        new DDLData { Text = "Closed", Value = "Closed" },
		new DDLData { Text = "Started", Value = "Started" },
        new DDLData { Text = "All", Value = "All" }
    };

    public string FilterValue { get; set; } = "All";

    protected override void OnInitialized()
    {
        this.TreeGridData = SelfReferenceData.GetTree().Take(12).ToList();
    }

    public class DDLData
    {
        public string Text { get; set; }
        public string Value { get; set; }
    }

    public async Task Change(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DDLData> Args)
    {
        if (Args.Value == "All")
        {
            await this.TreeGrid.ClearFilteringAsync();
        }
        else
        {
            await this.TreeGrid.FilterByColumnAsync("Progress", "equal", Args.Value);
        }
    }
}
